<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>为元素添加事件</title>
		<script>
			function fun1(event) {
				console.log('方法1')
				console.log(event)
			}
			function fun2(event) {
				console.log('方法2')
				console.log(event)
			}
			function fun3(event) {
				console.log('方法3')
				console.log(event)
			}
			function fun4(event) {
				console.log('方法4')
				console.log(event)
			}
		</script>
	</head>
	<body>
		<button id="btn" onclick="fun1(event)">按钮</button>
	</body>
	<script>
		var btn = document.getElementById('btn')
		// 为元素添加点击事件
		// 为onclick属性重新赋值，会覆盖原有动作
		btn.onclick = fun2
		// 添加事件监听，不会覆盖原有的onclick
		// 为元素增加事件动作
		btn.addEventListener('click', fun3)
		btn.addEventListener('click', fun4)
		btn.addEventListener('click', function(event){
			console.log('匿名方法')
			console.log(event)
		})
		btn.onclick = function(event) {
			console.log('覆盖原有的onclick')
			console.log(event)
		}
		// 触发事件
		// 先执行onclick，再执行事件监听
		btn.click() // 相当于手动点击
	</script>
</html>